<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>Bootstrap 101 Template</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="css/notice.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <!--标题部分-->
    <div>
        <h2>系统公告客户端设计及实现(Bootstrap+jquery)</h2>
    </div>
    <div id="notice-List">
        <button class="btn btn-primary" onclick="doDisplay()">新增</button>
        <!-- Contextual button for informational alert messages -->
        <button class="btn btn-danger">删除</button>
        <form id="Noticeform-find">
            <input type="text" placeholder="输入内容..." name="title">
            <input type="button" class="btn btn-info" value="查询" onclick="doQueryNotices()">
        </form>
        <div><!--内容列表区-->
            <table class="table">
                <thead>
                <tr>
                    <th><input type="checkbox" id="inlineCheckbox1" value="option1"></th>
                    <th>序号</th>
                    <th>标题</th>
                    <th>类型</th>
                    <th>状态</th>
                    <th>创建者</th>
                    <th>创建时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <tr><td colspan="8">数据正在加载中.....</td></tr>
                </tbody>
            </table>
            <!--分页-->
            <div class="pagination">
                <button class="pre">上一页</button>
                <span class="percent">1/1</span>
                <button class="next">下一页</button>
                <form class="form-button">
                    <input type="text" name="pageCurrent">
                    <input type="button" value="跳转" class="jump">
                </form>
            </div>
        </div>
    </div>

        <div id="notice-redact">
            <form id="noticeEditForm">
                <input type="hidden" id="id">
                <div class="form-group">
                    <label for="typeId" >类型:</label>
                    <select class="form-control" id="typeId">
                        <option value="1">通知</option>
                        <option value="2">公告</option>
                    </select>
                </div>
                <div class="form-group">
                    <label for="titleId">标题:</label>
                    <input type="text" class="form-control" id="titleId" placeholder="title">
                </div>
                <div class="form-group">
                    <label for="contentId">内容:</label>
                    <textarea class="form-control" rows="3" id="contentId" placeholder="content">

                    </textarea>
                </div>
                <div class="form-group">
                    <label>状态:</label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="0" checked> 正常
                    </label>
                    <label class="radio-inline">
                        <input type="radio" name="status" value="1"> 关闭
                    </label>
                </div>

                <div class="form-group">
                    <label for="Creator">创建者：</label>
                    <input class="form-control" id="Creator" placeholder="Creator">
                </div>

                <button type="button" class="btn btn-default submit" onclick="doSaveOrUpdate()">Submit</button>
                <button type="button" class="btn btn-default cancel">Cancel</button>
            </form>
        </div>
</div>

<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="js/notice.js"></script>
</body>
</html>